React デザイン
#react #css #デザイン
現状onigiri.w2.iconは、考えるのが面倒くさい + デザインセンスが皆無なので、Chakra UIベースで考える。
生のCSSとか使わない。SCSSも。
Chakra UI 中心の指針(現時点)
hr.icon
Chakra UI自体は普通に使ってもらうのでよくて、全体的な設定の話だな。
前提:React ディレクトリ構成を思考する
まず、stylesディレクトリに設定を置きましょう。
code: dir
styles/
- MedeaQuery/
- index.tsx
- const.ts
- theme.ts
MediaQueryは、レスポンシブなデザインにするために必要なやつ。
code: index.tsx
export const MediaQueryContext = createContext<MediaQueryContextType>({
isMobile: false,
isTablet: false,
isPC: false,
initLoading: true,
});
export const MediaQueryProvider = ({ children }: Props) => {
const isMobile, isTablet, isPC = useMediaQuery([
(max-width: ${BREAKPOINTS.mobile - 1}px),
`(min-width: ${BREAKPOINTS.mobile}px) and (max-width: ${
BREAKPOINTS.tablet - 1
}px)`,
(min-width: ${BREAKPOINTS.tablet}px),
]);
const initLoading, setInitLoading = useState(true);
useEffect(() => {
if (isMobile || isTablet || isPC) setInitLoading(false);
}, isMobile, isTablet, isPC);
return (
<MediaQueryContext.Provider
value={{ isMobile, isTablet, isPC, initLoading }}
{children}
</MediaQueryContext.Provider>
);
};
export const useMediaQueryContext = () => React.useContext(MediaQueryContext);
こんな感じで、isMobile、isTablet、isPCの3つのパターンを用意してる。
こいつをコンテキスト化することで、全コンポーネントでレスポンシブな設定が可能になる。
const.ts
スタイルに関係する共通定数をここで記載。
主に、色とか、ブレークポイントとかが大半の定義になってくるだろうか。
まあ、他にもマージンやパディングも共通化するために、ここに記載してもいいかも。
共通化して、一貫性のあるデザインにしよう。素人は最低限それくらいでいいだろう。
theme.ts
Chakra UI用の上書きテーマ。
code: theme.ts
const theme = extendTheme({
breakpoints,
fonts: {
body: -apple-system, "BlinkMacSystemFont", "Hiragino Kaku Gothic ProN","Hiragino Sans" sans-serif,
},
});
今んとこ、フォント設定しか予定なし。
React Webフォントを使う場合